import * as AntdIcons from "@ant-design/icons";
import classNames from "classnames";
import * as React from "react";
import type { ThemeType } from "./index";
import styles from "./style.module.less";

const allIcons: {
	[key: string]: any;
} = AntdIcons;

export interface CopyableIconProps {
	name: string;
	isNew: boolean;
	theme: ThemeType;
	justCopied: string | null;
	onSelect: (type: string, text: string) => any;
}

const CopyableIcon: React.FC<CopyableIconProps> = ({ name, justCopied, onSelect, theme }) => {
	const className = classNames({
		copied: justCopied === name,
		[theme]: !!theme
	});
	return (
		<li
			className={className}
			onClick={() => {
				if (onSelect) {
					onSelect(theme, name);
				}
			}}
		>
			{/* <Tooltip title={name}> */}
			{React.createElement(allIcons[name], { className: styles.anticon })}
			{/* </Tooltip> */}
			{/* <span className={styles.anticonClass}>
          <Badge dot={isNew}>{name}</Badge>
        </span> */}
		</li>
	);
};

export default CopyableIcon;
